<template>
  <div>
    <div id="echarsDay" ref="echarsDay"></div>
  </div>
</template>

<script>
export default {
  name: "echarsDay",
  created() {},
  mounted() {
    this.initCharts();
  },
  props: {
    currentDerviceInfo: Object,
    EcharsData: Array,
    xTimes: Array,
    parameter: String,
    parameterUnit: String,
    parameterUnitKey: String,
  },
  data() {
    return {
      echarsDay: null, // 图表
      parameterData: 0.0,
      // derInfo: this.currentDerviceInfo,
      option: {
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 50,
          axisLabel: {
            formatter: "{value}" + this.parameterUnit,
            align: "center",
          },
        },
        series: [
          {
            data: [],
            type: "line",
          },
        ],
      },
    };
  },
  watch: {
    EcharsData: {
      // deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        // console.log("异常数据发生改变");
        // console.log(newValue);
        this.initData();
        this.processData();
        this.echarsDay.setOption(this.option);
      },
    },
    xTimes: {
      deep: true,
      // immediate: true,
      handler(newValue, oldValue) {
        // console.log("异常数据发生改变");
        // console.log(newValue);
        this.initData();
        this.processData();
        this.echarsDay.setOption(this.option);
      },
    },
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.option.series[0].data = [];
      for (let i = 0; i < this.EcharsData.length; i++) {
        this.option.series[0].data.push(this.EcharsData[i].mean_number);
      }
      console.log(this.option.series[0].data, 22222);
      if (this.parameterUnitKey === "co2") {
        this.option.yAxis.max = 600;
      } else if (this.parameterUnitKey === "illumination") {
        this.option.yAxis.max = 100;
      } else if (this.parameterUnitKey === "pm25") {
        this.option.yAxis.max = 300;
      } else if (this.parameterUnitKey === "pm10") {
        this.option.yAxis.max = 300;
      } else if (this.parameterUnitKey === "temperature") {
        this.option.yAxis.max = 50;
      } else if (this.parameterUnitKey === "humidity") {
        this.option.yAxis.max = 100;
      } else {
        console.log(999);
        console.log(this.parameterUnitKey);
        console.log(999);
      }
      this.echarsDay = this.$echarts.init(this.$refs.echarsDay);
    },

    // 数据处理
    processData() {
      this.option.xAxis.data = this.xTimes;
      this.echarsDay.setOption(this.option);
    },

    //初始化数据
    initData() {},
  },
};
</script>

<style lang="scss" scoped>
#echarsDay {
  margin: 0 auto;
  width: 90%;
  height: 500px;
  // background-color: cadetblue;
}
</style>